<template>
	<view>
		<u-navbar title="忘记密码" :autoBack="true" :placeholder="true"></u-navbar>
		<view style="width: 700rpx;margin:0 auto;">
			<view style="font-size: 24rpx;color:#c9c9c9;margin-top:30rpx;margin-bottom: 100rpx;"><text
					style="color:red;margin-right: 20rpx;">*</text>请输入手机号和验证码找回密码</view>
			<view class="flex alignItem item">
				<view class="label">账号</view>
				<view class="val">
					<u-input v-model='account' placeholder="请输入您注册的账号"></u-input>
				</view>
			</view>
			<view class="flex alignItem item">
				<view class="label">手机</view>
				<view style="display: flex;width:calc(100% )">
					<view style="width: 55%;">
						<u-input type="text"  placeholder="请输入绑定的手机"  v-model="mobile"></u-input>
					</view>
					<view style="width: 45%;position: relative">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" changeText='倒计时X秒'ref="uCode"
							@change="codeChange"></u-code>
						<text style="top:50%;left:50%;transform: translate(-50%,-50%);font-size:24rpx;position:absolute"
							:style="{'color':color}" @tap="getCode">{{tips}}</text>
					</view>
				</view>
			</view>
			<view class="flex alignItem item">
				<view class="label">新密码</view>
				<view class="val">
					<u-input type="password" v-model='password' placeholder="请输入您新的密码"></u-input>
				</view>
			</view>
			<view class="flex alignItem item">
				<view class="label">确认密码</view>
				<view class="val">
					<u-input  type="password" v-model='verifyPwd' placeholder="请确认您的新密码"></u-input>
				</view>
			</view>
			<view class="flex alignItem item">
				<view class="label" >验证码</view>
				 
				<u-code-input v-model="verifyCode" :maxlength="6"></u-code-input>
			</view>
			<view style="width: 100%;height: 100rpx;"></view>
			<u-button shape='circle' :color="color" @click='forgotPassword'>修改</u-button>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				color:app.globalData.defaultColor,
				account: '',
				mobile: '',
				verifyPwd:'',
				password:'',
				tips: '',
				verifyCode:'',
				seconds: 60,
				load:0
			}
		},
		methods:{
			forgotPassword(){
				if(this.load==1){
					return uni.showLoading({
						title: '请勿重复提交 :)'
					});
				}
				
				
				if(!this.validatePass()) return
				this.load=1
				uni.$u.http.post('/user/forgotPassword', {
					userName:this.account,
					phoneNum:this.mobile,
					verifyCode:this.verifyCode,
					newPwd:this.password,
					verifyPwd:this.verifyPwd
				}).then(res=>{
					if(res){
						uni.showModal({
							title: '提示:',
							content: '修改成功，去登录?',
							success: (res) => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/login/index?path=pages/index/index'
									})
								}
						
							}
						})
					}
					this.load=0
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if(this.mobile.toString().length===0) {
						return uni.$u.toast('请输入电话号码')
					}
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res= await this.generateCode()
					if(!res) {
						uni.$u.toast('手机号不正确');
						return
					}
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 60);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			validatePass (){
				if(this.mobile.toString().length===0){
					uni.$u.toast('请输入电话号码')
					return false
				}else if(this.account.toString().length===0){
					uni.$u.toast('请输入账号')
					return false
				}else if(this.password.toString().length===0){
					uni.$u.toast('请输入密码')
					return false
				}else if( this.verifyPwd.toString().length===0){
					uni.$u.toast('请输入确认密码')
					return false
				}else if(this.verifyPwd.toString()!==this.password.toString()){
					uni.$u.toast('两次输入的密码不一致')
					return false
				}else if(this.verifyCode.toString().length===0){
					uni.$u.toast('请输入验证码')
					return false
				}else{
					return true
				}
			},
			generateCode(){
				return uni.$u.http.get('/user/generateCode',{
					params:{
						phoneNumber:this.mobile
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.item{
		border-bottom: 1rpx solid #eee;
		padding: 20rpx;
	}
</style>